/**
 * @description 意见反馈
 */

import style from './styles/Settings.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { ListItem, List, Dialog, Input, Toast } from 'wd-mobile';


import { query_info, bindEmail } from "api_xukaiyu/app/user";

import avator1 from "images/avatar/1.jpg";
import avator2 from "images/avatar/2.jpg";
import avator3 from "images/avatar/3.jpg";
import avator4 from "images/avatar/4.jpg";
import avator5 from "images/avatar/5.jpg";
import avator6 from "images/avatar/6.jpg";
import avator7 from "images/avatar/7.jpg";
import avator0 from "images/avatar/0.jpg";

const avatarArr = [avator0, avator1, avator2, avator3, avator4, avator5, avator6, avator7];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            query_info: {}
        }

        this.refInputFocus = React.createRef()
    }
    componentDidMount () {
        this.queryUserInfo()
    }
    queryUserInfo () {
        // 我的信息
        query_info().then(res => {
            this.setState({
                query_info: res.data
            })

            if (!res.data.wechatPortrait) {
                let mobileArr = res.data.mobile.split("");
                const avatarUrl = avatarArr[+mobileArr[mobileArr.length - 1] % 8];
                this.setState({
                    avatar: avatarUrl
                })
            }
        })
    }
    isEmail (e) {
        return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(e)
    }
    render () {
        return (
            <Fragment>
                <div className={classnames(style.main, "x-scroll-y")}>
                    <List>
                        {/* <HeadEditor pinch={true} complete={res=>{
                            console.log(res)
                        }}>
                            
                        </HeadEditor> */}
                        <ListItem title={<span>头像</span>}>
                            <div className={style.userAvatar} style={{ backgroundImage: `url(${this.state.query_info.wechatPortrait || this.state.avatar})` }}></div>
                        </ListItem>
                        <ListItem onClick={() => {
                            location.href = "./myCenter.html#/ChangeMobile"
                        }} title={<span>手机账号</span>} arrow="right">{this.state.query_info.mobile}</ListItem>
                        <ListItem onClick={() => {
                            Dialog.confirm(<div className={style.bindEmailWrapper}>
                                <div className={style.bindEmailDesc}>绑定邮箱后，下单后系统将会自动向绑定邮箱自动发送对应商品的券码信息</div>
                                <Input className={style.bindEmailInput} placeholder="输入绑定邮箱" ref={this.refInputFocus} />
                                <div className={style.bindEmailTips}>推荐使用QQ邮箱，163邮箱</div>
                            </div>, "修改绑定邮箱", undefined, {
                                onOk: () => {
                                    if (!this.isEmail(this.refInputFocus.current.value)) {
                                        Toast.info('邮箱格式不合法', 2000);
                                        return
                                    }
                                    bindEmail({
                                        email: this.refInputFocus.current.value
                                    }).then(res => {
                                        Toast.info('绑定成功', 2000);
                                        this.queryUserInfo()
                                    })
                                },
                                onCancel: () => { },
                                buttons: { "绑定": true, '取消': false }
                            });
                        }} title={<span>绑定邮箱</span>} arrow="right">{this.state.query_info.hasBindEmail ? this.state.query_info.email : '还未绑定'}</ListItem>
                    </List>
                </div>
            </Fragment >
        )
    }
}

export default App;